<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted, ref, useTemplateRef } from 'vue';
import geoJson from '@/assets/geo.json'
import { mapValues, max, min } from 'lodash';
import { portalInstance } from '@/utils/request';
import { useRouter } from 'vue-router';

const loading = ref(true)
const mode = ref('map')
let data = []
let mapOption;
let barOption;

async function fetchData() {
  const resp = await portalInstance.post('/system/show/map', {})

  // const resp = {
  //   data: [{ mapName: '北京', mapValue: '100000' }, { mapName: '上海', mapValue: '10000' }]
  // }


  console.log(resp)
  data = resp.data.data.filter(d => d.mapName != '其他').map(d => ({ name: d.mapName, value: d.mapValue })).sort(function (a, b) {
    return a.value - b.value;
  })

  // data = [
  //   { name: '北京', value: 4822023 },
  //   { name: '内蒙古', value: 731449 },
  //   { name: '河北', value: 6553255 },
  //   { name: '广东', value: 2949131 },
  // ].sort(function (a, b) {
  //   return a.value - b.value;
  // });

  mapOption = {
    backgroundColor: 'transparent',
    visualMap: {
      left: 'right',
      min: min(data.map(d => d.value)),
      max: max(data.map(d => d.value)),
      inRange: {
        // prettier-ignore
        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
      },
      text: ['数量多', '数量少'],
      calculable: true
    },
    geo1: [
      {
        map: 'china',
        aspectScale: 1,
        zoom: 1,
        // top: '10%',//***********重点**********距离顶部的位置，每层向下一个百分比
        // left: '15%',
        roam: false,
        z: 10,//*********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
        regions: regions,
        itemStyle: {
          areaColor: '#003b95',//****重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
          borderColor: '#ddd',
          borderWidth: 1,
          shadowColor: '#fff',
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10,
        },
        emphasis: {
        },
        select: {
        },
        tooltip: {
          show: false
        },
      },
    ],
    series: [
      {
        id: 'population',
        type: 'map',
        roam: false,
        map: 'china',
        // aspectScale: 1,
        animationDurationUpdate: 1000,
        universalTransition: true,
        data: data,
        regions: regions,
        itemStyle: {
          areaColor: 'transparent',
          borderColor: '#fff'
        }
      }
    ]
  };
  barOption = {
    backgroundColor: 'transparent',
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        rotate: 30
      },
      data: data.map(function (item) {
        return item.name;
      })
    },
    animationDurationUpdate: 1000,
    series: {
      type: 'bar',
      id: 'population',
      data: data.map(function (item) {
        return item.value;
      }),
      universalTransition: true
    }
  };

  loading.value = false
}


const regions = [
  { // 隐藏南海诸岛,因为顶层已经添加过了
    name: '南海诸岛',
    itemStyle: {
      normal: {
        opacity: 0 // 为 0 时不绘制该图形
      }
    },
    label: {
      show: false
    }
  }
]



let myChart;
const cont = useTemplateRef('map')

onMounted(async () => {
  await fetchData()
  const chartDom = document.getElementById('map'); console.log(chartDom)
  myChart = echarts.init(cont.value, 'dark');
  let option;

  myChart.showLoading();
  // const usaJson = await fetch('assets/').then(r => r.json())
  myChart.hideLoading();
  echarts.registerMap('china', geoJson, {
  });

  myChart.setOption(mapOption);
  // setInterval(function () {
  //   currentOption = currentOption === mapOption ? barOption : mapOption;
  //   myChart.setOption(currentOption, true);
  // }, 6000);

  option && myChart.setOption(option);
})

let intervalInst;
function changeMode() {
  clearInterval(intervalInst)
  if (mode.value == 'map') {
    myChart.setOption(mapOption, true)
  } else if (mode.value == 'auto') {
    let currentOption = mapOption;
    intervalInst = setInterval(function () {
      currentOption = currentOption === mapOption ? barOption : mapOption;
      myChart.setOption(currentOption, true);
    }, 5000);
  } else {
    myChart.setOption(barOption, true)
  }
}
// changeMode()
</script>


<template>
  <div style="width: 1000px;height: 600px; position: relative;">
    <div style="text-align: center; font-size: 18px; color: white">异常转账区域分布</div>
    <div id="map" ref="map" style="width: 100%;height: 600px;"></div>
    <div style="position: absolute; right: 0;top:0;z-index: 9999;">
      <el-radio-group v-model="mode" @change="changeMode">
        <!-- <el-radio-button label="自动" value="auto" /> -->
        <el-radio-button label="地图" value="map" />
        <el-radio-button label="柱状图" value="bar" />
      </el-radio-group>
    </div>
  </div>
</template>
